<template>
	<view class="revise">
		<view class="header">

		</view>
		<!-- 选择 -->
		<view class="select">
			<!-- 头像 -->
			<view class="uni-list boDbOT sex">
				<view class="uni-list-cell" @click="upload">
					<view class="uni-list-cell-left">
						头像
					</view>
					<view class="uni-list-cell-db">
						<image class="touxiang" :src="userData.avatar"></image>
						<image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin/image/iconLeft.png"></image>
					</view>
				</view>
			</view>
			<!-- 昵称 -->
			<view class="uni-list boDbOT sex">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						昵称
					</view>
					<view class="uni-list-cell-db nickname">
						<input type="text" v-model="userData.nickName" @input="handleNickname">
					</view>
					<!-- <image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin//image/iconLeft.png"></image> -->
				</view>
			</view>
			<!-- 性别 -->
			<view class="uni-list boDbOT sex">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						性别
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">
								<view v-if="userData.gender" class="">
									{{userData.gender}}
								</view>
								<view v-else class="date">
									性别
								</view>
								<image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin/image/iconLeft.png">
								</image>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- 选择年月 -->
			<view class="uni-list boDbOT">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						出生年月
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">
								<view v-if="userData.birthday" class="">
									{{userData.birthday}}
								</view>
								<view v-else class="date">
									出生年月
								</view>
								<image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin/image/iconLeft.png">
								</image>
							</view>
						</picker>

					</view>
				</view>
			</view>
			<!-- 最高学历 -->

			<view class="uni-list boDbOT sex">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						最高学历
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindXLChange" :value="xlIndex" :range="xueliList">
							<view class="uni-input">
								<view v-if="userData.school_record" class="">
									{{userData.school_record}}
								</view>
								<view v-else class="date">
									最高学历
								</view>
								<image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin/image/iconLeft.png">
								</image>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- 省市 -->
			<view class="uni-list nobord">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						所在省市
					</view>
					<view class="uni-list-cell-db">
						<!-- <picker @change="bindXLChange" :value="xlIndex" :range="xueliList">
							<view class="uni-input">
								{{xueliList[xlIndex]}}
								<image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin/image/iconLeft.png"></image>
							</view>
						</picker> -->
						<biaofun-city :defaultValue="defaultValue" @change="onChangeRegion">

						</biaofun-city>

						<image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin/image/iconLeft.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="submit">
			<button class="btn" @click="$u.debounce(submitRevise, 500)">保存资料</button>
		</view>
		<view class="footer">
			<image class="footerimg" src="https://wlsy.nanjingyunpeng.cn/weixin/image/footerImg.png"></image>
		</view>
	</view>
</template>

<script>
	import biaofunCity from "@/components/biaofun-city2.vue";
	import {
		edituserinfos,
		getuserinfo
	} from '../../api/api.js'
	export default {
		components: {
			biaofunCity,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				array: ['保密', '男', '女'],
				index: 0,
				xueliList: ['小学', '初中', '高中', '中专','大专', '本科','硕士','博士'],
				xlIndex: 0,
				date: currentDate,
				defaultValue: null,
				dataFlag: true,
				hapFlag: true,
				addressFlag: true,
				sexFlag: true,
				avaterSrc: "",

				userData: {
					avatar: "",
					nickName: "", //昵称
					gender: "", //性别
					birthday: "", //出生年月
					school_record: "", //最高学历
					province: "", //所在省市
				}

			}
		},
		onLoad() {

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getuserinfo()
		},
		methods: {
			//获取用户信息进行回显
			async getuserinfo() {
				let res = await getuserinfo()
				if (res.code == 1000) {
					// console.log("用户信息", res)
					this.userData.avatar = res.data.avatar
					this.userData.birthday = res.data.birthday
					this.userData.gender = res.data.gender
					this.userData.integral = res.data.integral.substring(0, 2)
					this.userData.nickName = res.data.nickname
					this.userData.school_record = res.data.school_record
					this.userData.province = res.data.province
					this.defaultValue = res.data.province.split('-')
				}
			},
			upload() {

				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log("upload1111", tempFilePaths)
						uni.uploadFile({
							url: 'https://wlsy.nanjingyunpeng.cn/api/login/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								// console.log("retrun", JSON.parse(uploadFileRes.data));
								this.userData.avatar = JSON.parse(uploadFileRes.data).data
							}
						});
					}
				});
			},
			//昵称
			handleNickname(e) {
				console.log("eeeeeeeee", e)
			},
			//性别
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.userData.gender = this.array[this.index]
			},
			//学历
			bindXLChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.xlIndex = e.detail.value
				this.userData.school_record = this.xueliList[this.xlIndex]
			},
			bindDateChange: function(e) {
				// this.date = e.detail.value
				this.userData.birthday = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();


				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			handleDate() {
				this.dataFlag = false
			},
			handleHap() {
				this.hapFlag = false
			},
			handleAdress() {
				this.addressFlag = false
			},
			handleSex() {
				this.sexFlag = false
			},
			onChangeRegion(e) {
				console.log("eeeeeeee", e)
				this.userData.province = e[0].name + '-' + e[1].name
				
			},
			async submitRevise() {
				let data = {
					avatar: this.userData.avatar,
					nickname: this.userData.nickName,
					gender: this.userData.gender,
					birthday: this.userData.birthday,
					school_record: this.userData.school_record,
					province: this.userData.province,
				}
				// console.log("用户信息", data)
				let res = await edituserinfos(data)
				// console.log("用户编辑", res)
				if (res.code == 1000) {
					uni.switchTab({
						url: '/pages/center/center',
						success() {
							let page = getCurrentPages().pop(); //跳转页面成功之后
							if (!page) return;
							page.onLoad(); //如果页面存在，则重新刷新页面
						}
					});
				}

			}

		}
	}
</script>

<style scoped lang="scss">
	.revise {
		min-height: 100%;
		background-color: #EEF7FE;
		padding: 30rpx;
		padding-top: 70rpx;
		box-sizing: border-box;

		.header {
			width: 750rpx;
			height: 40rpx;
			background: #466EE7;
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			position: fixed;
			top: 0;
			left: 0;
		}

		.select {
			width: 690rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 8rpx 0px rgba(51, 51, 51, 0.05);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			padding: 20rpx;
			box-sizing: border-box;

			.uni-list {
				width: 670rpx;
				height: 116rpx;
				ertical-align: middle;
				line-height: 116rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				position: relative;

				.boDbOT {
					border-bottom: 1px solid #EEEEEE;
				}

				.nickname {
					margin-top: 33rpx;
					position: relative;
					// width: 200rpx;
					font-size: 28rpx;
					text-align: right;
					padding-right: 20rpx;
					box-sizing: border-box;
					// background-color: pink;
				}

				.uni-list-cell-db {
					display: flex;
					align-items: center;
					position: relative;

					.date {
						width: 220rpx;
						height: 40rpx;
						text-align: right;
						background: #FFFFFF;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 33rpx;
						position: absolute;
						right: 39rpx;
						top: 45rpx;
					}
				}

				.uni-input {
					display: flex;
					align-items: center;
				}

				.uni-list-cell {
					display: flex;
					justify-content: space-between;
				}

				.jiantou {
					width: 48rpx;
					height: 48rpx;

				}

				.touxiang {
					width: 60rpx;
					height: 60rpx;
				}

				.nobord {
					// border-bottom: 0px solid #FFFFFF;
				}
			}

		}

		.submit {
			position: absolute;
			bottom: 100rpx;
			z-index: 99;

			.btn {
				width: 690rpx;
				height: 88rpx;
				background: linear-gradient(1deg, #688EFA 0%, #466EE7 100%);
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				opacity: 1;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 88rpx;
			}
		}

		.footer {
			width: 750rpx;
			height: 324rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.footerimg {
				width: 100%;
				height: 100%;
			}
		}

	}
</style>
